<template>
	<div class="ArticleList">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>合同管理</el-breadcrumb-item>
			<el-breadcrumb-item>合同列表</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card class="box-card">

			<el-row :gutter="20">
				<!--
				<el-col :span="9">
				  <el-date-picker
					v-model="params.search_time"
					type="daterange"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
				  </el-date-picker>
				</el-col>
				-->
				<el-col :span="7">
				  <el-input clearable v-model="params.keywords" clearable placeholder="请输入内容" class="input-with-select">
					<el-button
					  slot="append"
					  icon="el-icon-search"
					  @click="getArticleList"
					></el-button>
				  </el-input>
				</el-col>
				<el-col :span="4">
					<el-button  type="success" @click="addHeTong.dialogVisible = true">添加合同</el-button>
				</el-col>
			</el-row>
	
			<el-table :data="listData" border style="width: 100%">
				<el-table-column type="index" label="id" width="40"></el-table-column>

				<el-table-column prop="name" label="姓名/企业名称" width="150">
				</el-table-column>
				<el-table-column prop="no" label="身份证/证件号" width="180">
				</el-table-column>
<!-- 				<el-table-column prop="diqu" label="地区">
				</el-table-column> -->
				<el-table-column prop="password" label="密码" width="120">
				</el-table-column>				
				<el-table-column prop="hetongbeianhao" label="合同备案号">
				</el-table-column>
				<el-table-column prop="beianxiangmumingcheng" label="备案项目名称">
				</el-table-column>
				<el-table-column prop="beianshijian" label="备案时间">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
					  <!-- 修改 -->
					  <el-button type="primary" icon="el-icon-setting" size="mini"
						@click="getHeTong(scope.row.id)"
					  ></el-button>
					  <!-- 删除 -->
					  <el-button type="primary" size="mini" icon="el-icon-delete" @click="delHeTong(scope.row.id)"></el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage4" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
		
		<!-- 添加合同 -->
		<el-dialog
		  title="添加合同"
		  :visible.sync="addHeTong.dialogVisible"
		  width="50%"
		  >
		  <el-form label-width="150px" :model="addHeTong.addHeTongForm" >
		    <el-form-item label="姓名/企业名称">
		      <el-input  v-model="addHeTong.addHeTongForm.name"></el-input>
		    </el-form-item>
		    <el-form-item label="身份证/证件号">
		      <el-input v-model="addHeTong.addHeTongForm.no"></el-input>
		    </el-form-item>
			<el-form-item label="密码">
			  <el-input v-model="addHeTong.addHeTongForm.password"></el-input>
			</el-form-item>
<!-- 			<el-form-item label="地区">
			  <el-select v-model="addHeTong.addHeTongForm.diqu" placeholder="请选择">
				<el-option
				  v-for="item in options"
				  :key="item.value"
				  :label="item.label"
				  :value="item.value">
				</el-option>
			  </el-select>
			</el-form-item> -->
			<el-form-item label="合同备案号">
			  <el-input v-model="addHeTong.addHeTongForm.hetongbeianhao"></el-input>
			</el-form-item>
			<el-form-item label="备案项目名称">
			  <el-input v-model="addHeTong.addHeTongForm.beianxiangmumingcheng"></el-input>
			</el-form-item>
			<el-form-item label="楼栋号">
			  <el-input v-model="addHeTong.addHeTongForm.loudonghao"></el-input>
			</el-form-item>
			<el-form-item label="房间号">
			  <el-input v-model="addHeTong.addHeTongForm.fangjianhao"></el-input>
			</el-form-item>
			<el-form-item label="备案时间">
			  <el-input v-model="addHeTong.addHeTongForm.beianshijian"></el-input>
			</el-form-item>
			<el-form-item label="不动产证号">
			  <el-input v-model="addHeTong.addHeTongForm.budongchanquanzhenghao"></el-input>
			</el-form-item>
			<el-form-item label="不动产单元号">
			  <el-input v-model="addHeTong.addHeTongForm.budongchandanyuanhao"></el-input>
			</el-form-item>			
			<el-form-item label="登记时间">
			  <el-input v-model="addHeTong.addHeTongForm.dengjishijian"></el-input>
			</el-form-item>
			<el-form-item label="面积">
			  <el-input v-model="addHeTong.addHeTongForm.mianji"></el-input>
			</el-form-item>
			<el-form-item label="落座">
			  <el-input v-model="addHeTong.addHeTongForm.luozuo"></el-input>
			</el-form-item>
			<el-form-item label="用途">
			  <el-input v-model="addHeTong.addHeTongForm.yongtu"></el-input>
			</el-form-item>
			<el-form-item label="权力性质">
			  <el-input v-model="addHeTong.addHeTongForm.quanlixingzhi"></el-input>
			</el-form-item>
			<el-form-item label="权力人姓名">
			  <el-input v-model="addHeTong.addHeTongForm.quanliren"></el-input>
			</el-form-item>
			<el-form-item label="房屋状态">
			  <el-input v-model="addHeTong.addHeTongForm.fangwuhzuangtai"></el-input>
			</el-form-item>
			
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addHeTong.dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addHeTongFunc('addHeTong.addHeTongForm')">确 定</el-button>
		  </span>
		</el-dialog>
		<!-- 编辑合同 -->
		<el-dialog title="编辑合同" :visible.sync="editHeTong.dialogVisible" width="50%">
		  <el-form label-width="150px" :model="editHeTong.editHeTongForm">
			<el-form-item label="姓名/企业名称">
			  <el-input  v-model="editHeTong.editHeTongForm.name"></el-input>
			</el-form-item>
			<el-form-item label="身份证/证件号">
			  <el-input v-model="editHeTong.editHeTongForm.no"></el-input>
			</el-form-item>
			<el-form-item label="密码">
			  <el-input v-model="editHeTong.editHeTongForm.password"></el-input>
			</el-form-item>
<!-- 			<el-form-item label="地区">
			  <el-select v-model="editHeTong.editHeTongForm.diqu" placeholder="请选择">
				<el-option
				  v-for="item in options"
				  :key="item.value"
				  :label="item.label"
				  :value="item.value">
				</el-option>
			  </el-select>
			</el-form-item> -->
			<el-form-item label="合同备案号">
			  <el-input v-model="editHeTong.editHeTongForm.hetongbeianhao"></el-input>
			</el-form-item>
			<el-form-item label="备案项目名称">
			  <el-input v-model="editHeTong.editHeTongForm.beianxiangmumingcheng"></el-input>
			</el-form-item>
			<el-form-item label="楼栋号">
			  <el-input v-model="editHeTong.editHeTongForm.loudonghao"></el-input>
			</el-form-item>
			<el-form-item label="房间号">
			  <el-input v-model="editHeTong.editHeTongForm.fangjianhao"></el-input>
			</el-form-item>
			<el-form-item label="备案时间">
			  <el-input v-model="editHeTong.editHeTongForm.beianshijian"></el-input>
			</el-form-item>
			<el-form-item label="不动产证号">
			  <el-input v-model="editHeTong.editHeTongForm.budongchanquanzhenghao"></el-input>
			</el-form-item>
			<el-form-item label="不动产单元号">
			  <el-input v-model="editHeTong.editHeTongForm.budongchandanyuanhao"></el-input>
			</el-form-item>
			<el-form-item label="登记时间">
			  <el-input v-model="editHeTong.editHeTongForm.dengjishijian"></el-input>
			</el-form-item>
			<el-form-item label="面积">
			  <el-input v-model="editHeTong.editHeTongForm.mianji"></el-input>
			</el-form-item>
			<el-form-item label="落座">
			  <el-input v-model="editHeTong.editHeTongForm.luozuo"></el-input>
			</el-form-item>
			<el-form-item label="用途">
			  <el-input v-model="editHeTong.editHeTongForm.yongtu"></el-input>
			</el-form-item>
			<el-form-item label="权力性质">
			  <el-input v-model="editHeTong.editHeTongForm.quanlixingzhi"></el-input>
			</el-form-item>
			<el-form-item label="权力人姓名">
			  <el-input v-model="editHeTong.editHeTongForm.quanliren"></el-input>
			</el-form-item>			
			<el-form-item label="房屋状态">
			  <el-input v-model="editHeTong.editHeTongForm.fangwuhzuangtai"></el-input>
			</el-form-item>
			</el-form>
			<!-- 底部按钮 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="editHeTong.dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editHeTongDo(editHeTong.editHeTongForm.id)">确 定</el-button>
			</span>
		</el-dialog>		
		
	</div>

</template>

<script>
export default {
  name: 'HeTongList',
  data () {
    return {
		options: [
			{
			  value: '城六区',
			  label: '城六区'
			},
			{
			  value: '长安区',
			  label: '长安区'
			},
			{
			  value: '高陵区',
			  label: '高陵区'
			},
			{
			  value: '临潼区',
			  label: '临潼区'
			},
			{
			  value: '阎良区',
			  label: '阎良区'
			},
			{
			  value: '鄠邑区',
			  label: '鄠邑区'
			},
			{
			  value: '蓝田县',
			  label: '蓝田县'
			},
			{
			  value: '周至县',
			  label: '周至县'
			},
			{
			  value: '西咸新区',
			  label: '西咸新区'
			},
			{
			  value: '港务区',
			  label: '港务区'
			}
		],
		addHeTong: {
			dialogVisible: false,
			addHeTongForm: {}
		},
		editHeTong: {
			dialogVisible: false,
			editHeTongForm: {}
		},
	    listData: [],
	    total: 100,
	    pageSize: 10,
	    currentPage4: 1,
	    params: {
			search_time: '',
			keywords: '',
			page: 1,
			limit: 10
	    },
	    gridData: []
    }
  },
  created () {
    this.getArticleList()
  },
  methods: {
    async getArticleList () {
      const {
        data: res
      } = await this.$http.get(
        'api/admin/heTong/list', {
          params: this.params
        }
      )
      this.listData = res.data.data
      this.total = res.data.total
      console.log(this.listData)
    }, // 每页显示多少条
    handleSizeChange (newSize) {
      console.log(newSize)
      this.params.limit = newSize
      this.getArticleList()
    }, // 第几页
    handleCurrentChange (newPage) {
      console.log(newPage)
      this.params.page = newPage
      this.getArticleList()
    },
	  // 添加用户
	  async addHeTongFunc(formName) {
		let params = this.addHeTong.addHeTongForm
		console.log('addHeTongForm', this.addHeTong.addHeTongForm)
		if (!params.name) {
		  return this.$message.error('姓名/企业名称')
		}
		if (!params.no) {
		  return this.$message.error('身份证/证件号')
		}		
		if (!params.diqu) {
		  // return this.$message.error('地区必须选择')
		}

		console.log(this.addHeTong.addHeTongForm)
		const {
			data: res
		} = await this.$http.post(
			'api/admin/heTong/add',
			this.addHeTong.addHeTongForm
		)
		if (res.status) return this.$message.error(res.message)
		console.log('添加用户返回结果', res)
		this.$message.success(res.message)
		this.addHeTong.dialogVisible = false
		this.getArticleList()
	  },
	  //编辑单挑合同信息
	  async getHeTong(id) {
		const {
			data: res
		} = await this.$http.get(
			'api/admin/heTong/get', {
				params: {id: id}
			}
		)
	    this.editHeTong.dialogVisible = true
	    this.editHeTong.editHeTongForm = res.data
	  },
	  //编辑合同信息提交处理
      async editHeTongDo(id) {
        const {data: res} = await this.$http.post(
			'api/admin/heTong/edit',
			this.editHeTong.editHeTongForm
		)
        console.log('res结果：', res)
        if (res.status) return this.$message.error(res.message)

        this.$message.success(res.message)
        this.editHeTong.dialogVisible = false
        this.getArticleList()
      },	  
      // 删除合同
      async delHeTong(id) {
        const {data: res} = await this.$http.post(
			'api/admin/heTong/del',
			{'id':id}
        )
        if (res.status) return this.$message.error(res.message)
        this.$message.success(res.message)
        this.getArticleList()
      }
  }
}
</script>
<style>
</style>